<template>
  <div class="id6"></div>
</template>

<script>
import { postdata2 } from "../api/axios";
import * as echarts from "echarts";
export default {
  data() {
    return {
      xdata: [],
      ydata: [],
    };
  },
  methods: {
    post2() {
      postdata2().then(({ data }) => {
        let arr = data.data;
        var a = 0,
          b = 0,
          c = 0,
          d = 0;
        for (let i = 0; i < arr.length; i++) {
          const ai = arr[i];
          if (ai.year == 2019) {
            a += 1;
          } else if (ai.year == 2020) {
            b += 1;
          } else if (ai.year == 2021) {
            c += 1;
          } else if (ai.year == 2022) {
            d += 1;
          }
        }
        this.xdata = [2019, 2020, 2021, 2022];
        this.ydata = [a, b, c, d];
        console.log(this.xdata);
        console.log(this.ydata);
      });
    },
    ech2() {
      var myEcharts = echarts.init(document.querySelector(".id6"));
      var option = {
        title: {
          text: "任务6",
        },
        xAxis: { type: "", data: this.xdata },
        yAxis: { type: "value" },
        series: [
          {
            type: "line",
            data: this.ydata,
          },
        ],
      };
      myEcharts.setOption(option);
    },
  },
  mounted() {
    this.post2();
    setTimeout(() => {
      this.ech2();
    }, 5000);
  },
};
</script>

<style scoped>
.id6 {
  width: 100%;
  height: 34.375rem;
}
</style>